{% extends 'endbase.html' %}
{% block title %}
	个人中心
{% endblock %}
{% block head %}
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<link rel="stylesheet" href="{{ url_for('static',filename='css/editormd.min.css') }}" />
    <script src="{{ url_for('static',filename='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/editormd.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/image.js') }}"></script>

    <style>
        @font-face {
            font-family: 'editormd';
            src: url("{{ url_for('static', filename='fonts/editormd.woff') }}") format('woff');
            font-weight: normal;
            font-style: normal;
        }

    </style>
{% endblock %}

{% block body %}
<div class="container">
    <form class="mysetting" action="{{ url_for('auth.update_profile') }}" method="post" enctype="multipart/form-data">
        <div class="col-md-5">
            <div class="row ">
                <input name="user_id" type="hidden" value="{{ g.user.id }}" class="form-group">
                <label for="mypic" class="control-label">头像</label>
                <div class="upload-area">
                    <input type="file" id="avatarupload" accept="image/*" style="display: none" onchange="previewImage(this)" name="mypic">
                    <label for="avatarupload" class="upload-box" style="">
                        <div  class="plus-icon">
                             <i class="bi bi-plus-lg fs-1"></i>
                        </div>
                        <img id="preview" class="preview-image" src="{{ url_for('static',filename=g.user.avatar) }}"style="width: 100px;height: 100px;">
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label for="myname" class="control-label">用户名</label>
                <input id="myname" name="username" type="text" required placeholder="请输入用户名" class="form-control" value="{{ g.user.username }}">
            </div>
            <div class="form-group">
                <label for="myemail" class="control-label">邮箱</label>
                <input id="myemail" name="email" type="text" required placeholder="请输入邮箱" class="form-control" value="{{ g.user.email }}">
            </div>
            <div class="form-group">
                <label for="mypswd" class="control-label">密码</label>
                <a href="{{url_for('auth.update_password')}}">修改密码</a>
            </div>
            <div class="form-group">
                <label for="myjob" class="control-label">职业</label>
                <input id="myjob" name="job" type="text" required placeholder="请输入职业" class="form-control" value="{{ g.user.job }}">
            </div>

        </div>
        <div class="col-md-7">
            <div class="form-group">

            </div>
            <label for="editor" class="control-label">个人简介</label>
            <div id="editor">
                <textarea style="display:none;" name="profile"> {{ g.user.profile or ' Likt个人博客' }}</textarea>
            </div>
        </div>
        <div class="form-group row col-md-1">
            <button class="form-control btn btn-danger" type="submit" style="margin-left: 15px;margin-top: -100px; ">保存</button>
        </div>
    </form>
</div>

<script type="text/javascript">
        $(function() {
            var editor = editormd("editor", {
                 width: "100%",
                 height:  "calc(100vh - 260px)",
                 //markdown: "xxxx",     // dynamic set Markdown text
                path : "{{ url_for('static',filename='/lib/') }}",
                toolbarIcons : [  <!-- 精简工具栏 -->
                    "undo","redo","hr","table","datetime","emoji","|",
                    "bold", "italic", "quote", "|",
                    "list-ul", "list-ol", "|",
                    "link", "image", "code", "|",
                    "preview", "fullscreen","help"
                ],
                emoji: true,
                emojiPath: "{{ url_for('static', filename='plugins/emoji-dialog/emoji/') }}",
                imageUpload : true,  <!-- 启用图片上传 -->
                imageFormats : ["jpg", "png", "gif"],
                imageUploadURL : "{{ url_for('security.upload_image') }}" //需在后端实现该路由
            });
            // ✅ 粘贴图片支持
            $("#editor").on("paste", function (e) {
                var clipboardData = e.originalEvent.clipboardData;
                if (!clipboardData) return;

                var items = clipboardData.items;
                if (!items) return;

                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf("image") !== -1) {
                        var file = items[i].getAsFile();
                        uploadImage(file);
                    }
                }
            });

            // ✅ 拖拽上传支持
            $("#editor").on("drop", function (e) {
                e.preventDefault();
                var files = e.originalEvent.dataTransfer.files;
                if (files.length > 0) {
                    for (var i = 0; i < files.length; i++) {
                        uploadImage(files[i]);
                    }
                }
            });

            function uploadImage(file) {
                var formData = new FormData();
                formData.append("editormd-image-file", file);

                $.ajax({
                    url: "{{ url_for('security.upload_image') }}",
                    type: "POST",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        if (res.success === 1) {
                            editor.insertValue("![](" + res.url + ")");
                        } else {
                            alert("上传失败：" + res.message);
                        }
                    },
                    error: function () {
                        alert("上传请求失败！");
                    }
                });
            }
        });



</script>
{% endblock %}